<template>
  <div class="fixed bottom-0 left-0 right-0 z-50 md:hidden">
    <!-- 折叠菜单 -->
    <div
      class="collapse collapse-arrow bg-base-100 rounded-t-xl shadow-xl"
      :class="{ 'collapse-open': isMenuOpen }"
    >
      <input type="checkbox" v-model="isMenuOpen" class="min-h-0" />
      <div class="collapse-title min-h-0 py-2 flex justify-center">
        <div class="w-10 h-1 bg-base-content/30 rounded-full"></div>
      </div>
      <div class="collapse-content p-4">
        <div class="flex flex-col gap-2">
          <div
            class="flex items-center gap-3 p-2 rounded-lg hover:bg-base-200 cursor-pointer"
          >
            <svg
              class="size-[1.5em]"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
            >
              <g
                fill="currentColor"
                stroke-linejoin="miter"
                stroke-linecap="butt"
              >
                <polyline
                  points="1 11 12 2 23 11"
                  fill="none"
                  stroke="currentColor"
                  stroke-miterlimit="10"
                  stroke-width="2"
                ></polyline>
                <path
                  d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="square"
                  stroke-miterlimit="10"
                  stroke-width="2"
                ></path>
                <line
                  x1="12"
                  y1="22"
                  x2="12"
                  y2="18"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="square"
                  stroke-miterlimit="10"
                  stroke-width="2"
                ></line>
              </g>
            </svg>
            <span class="text-sm font-medium">首页</span>
          </div>
          <div
            class="flex items-center gap-3 p-2 rounded-lg hover:bg-base-200 cursor-pointer"
          >
            <svg
              class="size-[1.5em]"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
            >
              <g
                fill="currentColor"
                stroke-linejoin="miter"
                stroke-linecap="butt"
              >
                <polyline
                  points="3 14 9 14 9 17 15 17 15 14 21 14"
                  fill="none"
                  stroke="currentColor"
                  stroke-miterlimit="10"
                  stroke-width="2"
                ></polyline>
                <rect
                  x="3"
                  y="3"
                  width="18"
                  height="18"
                  rx="2"
                  ry="2"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="square"
                  stroke-miterlimit="10"
                  stroke-width="2"
                ></rect>
              </g>
            </svg>
            <span class="text-sm font-medium">单词本</span>
          </div>
          <div
            class="flex items-center gap-3 p-2 rounded-lg hover:bg-base-200 cursor-pointer"
          >
            <svg
              class="size-[1.5em]"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
            >
              <g
                fill="currentColor"
                stroke-linejoin="miter"
                stroke-linecap="butt"
              >
                <circle
                  cx="12"
                  cy="12"
                  r="3"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="square"
                  stroke-miterlimit="10"
                  stroke-width="2"
                ></circle>
                <path
                  d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z"
                  fill="none"
                  stroke="currentColor"
                  stroke-linecap="square"
                  stroke-miterlimit="10"
                  stroke-width="2"
                ></path>
              </g>
            </svg>
            <span class="text-sm font-medium">设置</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <div class="dock dock-sm bg-base-100 shadow-xl">
      <button @click="toggleMenu">
        <svg
          class="size-[1.2em]"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
        >
          <g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
            <circle
              cx="12"
              cy="12"
              r="3"
              fill="none"
              stroke="currentColor"
              stroke-linecap="square"
              stroke-miterlimit="10"
              stroke-width="2"
            ></circle>
            <path
              d="m22,13.25v-2.5l-2.318-.966c-.167-.581-.395-1.135-.682-1.654l.954-2.318-1.768-1.768-2.318.954c-.518-.287-1.073-.515-1.654-.682l-.966-2.318h-2.5l-.966,2.318c-.581.167-1.135.395-1.654.682l-2.318-.954-1.768,1.768.954,2.318c-.287.518-.515,1.073-.682,1.654l-2.318.966v2.5l2.318.966c.167.581.395,1.135.682,1.654l-.954,2.318,1.768,1.768,2.318-.954c.518.287,1.073.515,1.654.682l.966,2.318h2.5l.966-2.318c.581-.167,1.135-.395,1.654-.682l2.318.954,1.768-1.768-.954-2.318c.287-.518.515-1.073.682-1.654l2.318-.966Z"
              fill="none"
              stroke="currentColor"
              stroke-linecap="square"
              stroke-miterlimit="10"
              stroke-width="2"
            ></path>
          </g>
        </svg>
        <span class="dock-label">菜单</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";

// 检测是否为移动设备
const isMobile = ref(false);
const isMenuOpen = ref(false);

// 切换菜单显示状态
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

onMounted(() => {
  // 检测设备类型
  const checkMobile = () => {
    isMobile.value = window.innerWidth < 768;
  };

  // 初始检测
  checkMobile();

  // 监听窗口大小变化
  window.addEventListener("resize", checkMobile);
});

onUnmounted(() => {
  window.removeEventListener("resize", checkMobile);
});
</script>

<style scoped>
.dock {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* 自定义折叠菜单样式 */
.collapse-title {
  cursor: pointer;
}

.collapse-content {
  max-height: 70vh;
  overflow-y: auto;
}
</style>
